import { Box, Button } from '@mui/material';
import { styled } from '@mui/material/styles';
import { useState } from 'react';
import { toast } from 'react-toastify';

import Transaction from '../../api/transaction/transaction';
import TransactionManager from '../../api/transaction/transaction-manager';
import LoadingPopup from '../../components/loading-popup';
import { useGetThemeStateStore } from '../../stores/theme';

const RetryButton = styled(Button)(() => ({
    marginLeft: '10px',
    fontFamily: 'Rubik',
    background: '#1F1D37',
    color: '#F7941E',
    borderRadius: '0.5rem',
    width: 100,
    height: 30,
    fontSize: '0.8rem'
}));

export const GGButton = styled(Button)(() =>
    {
        const {btnColor1,btnColor2,btnColor3} = useGetThemeStateStore();

        return     (
            {
                marginLeft: '10px',
                fontFamily: 'Rubik',
                background: '#1F1D37',
                color: '#F7941E',
                borderRadius: '0.5rem',
                width: 100,
                height: 30,
                fontSize: '0.8rem',
            })
    }
);

interface Props {
    transaction: Transaction;
}

const RetryTransactionButton = (props: Props) => {
    const [showPopup, setShowPoup] = useState<boolean>(false);

    const onRetry = async () => {
        setShowPoup(true);

        const refunded = await TransactionManager.retry(props.transaction.id);

        if (refunded == true) {
            location.reload();
            return;
        }

        if (refunded && refunded['error'] && refunded['error']['message']) {
            toast.error(refunded['error']['message']);
        }

        setShowPoup(false);
    };

    return (
        <RetryButton onClick={onRetry}>
            <Box
                component="img"
                sx={{
                    height: '0.8rem',
                    width: '0.8rem',
                    marginRight: '0.5rem'
                }}
                alt="Icon"
                src={'/retry.svg'}
            />
            RETRY
            <LoadingPopup message={'Retrying the transaction...'} show={showPopup} />
        </RetryButton>
    );
};

export default RetryTransactionButton;
